<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Document</title>
    <link rel="stylesheet" href="../../css/api.css">
    <link rel="stylesheet" href="../../css/news.css">
    <link rel="stylesheet" href="../../css/login.css">
    <link rel="stylesheet" href="../../css/icon/iconfont.css">
    <style>
        .login-bg {
            padding: 10px 0;
            width: 100vw;
            background: #fff;
        }

        .wrap {
            padding-top: 20vw;
        }

        .wrap .li {
            display: flex;
            align-items: center;
            flex-direction: column;
            color: #aaa;
            /* width: calc(50vw - 20px); */
            width: 165px;
            height: 220px;
            background: #DEF4FE;
            position: relative;
        }

        .wrap .li.female {
            background: #FFE3E8;
        }

        .wrap .li.select {
            color: #fff;
            width: 159px;
            height: 214px;
            /* width: 165px;
            height: 220px; */
            border: 3px solid #5AC8FA;
            border-radius: 10px;
        }

        .wrap .li.female.select {
            border: 3px solid #FF728D;
        }

        .wrap .li .iconfont {
            border: 1px solid;
            padding: 14px;
            border-radius: 50%;
            margin-bottom: 10px;
        }

        .wrap .li .img {
            position: absolute;
            left: 12.5px;
            bottom: 18px;
            display: flex;
            align-items: flex-end;
        }

        .wrap .li.select .img {
            left: 0;
            bottom: 0;
        }

        .wrap .li img {
            width: 100%;
        }

        .info {
            position: relative;
            margin: 40px 0;
        }

        .info::before {
            content: url('../../image/login/quotes0.png');
            position: absolute;
            top: -24px;
            left: -27px;
        }

        .info::after {
            content: url('../../image/login/quotes1.png');
            position: absolute;
            bottom: -24px;
            right: -27px;
        }

        .info p {
            text-align: center;
            color: #fff;
            font-size: 14px;
            margin: 0 10px;
        }

        .next-btn {
            color: #fff;
        }

        .next-btn.submit {
            background: rgb(255, 114, 141);
        }

        .tip {
            color: #ADB5B7;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="login-bg" id="view" v-cloak>
        <div class="wrap">
            <ul class="flex-a">
                <li class="li" :class="{'select': sexType == 1}" tapmode onclick="selectSex(1)">
                    <div class="img">
                        <img v-if="sexType != 1" src="../../image/icon/img_male.png" alt="">
                        <img v-if="sexType == 1" src="../../image/icon/img_male_s.png" alt="">
                    </div>
                </li>
                <li class="li female" :class="{'select': sexType == 2}" tapmode onclick="selectSex(2)">
                    <div class="img">
                        <img v-if="sexType != 2" src="../../image/icon/img_female.png" alt="">
                        <img v-if="sexType == 2" src="../../image/icon/img_female_s.png" alt="">
                    </div>
                </li>
            </ul>
            <!-- <div class="info-wrap flex-c">
                <div class="info" >
                    <p>空姐、模特儿、瑜伽教练......<br>这里有很多女神等你来约</p>
                    <p class="new-hide">这里长得漂亮可以当饭吃</p>
                </div>
            </div> -->
            <button class="next-btn new-btn " :class="{'submit': sexType!=0}" tapmode onclick="submit()">下一步</button>
            <p class="tip">选择性别后无法修改</p>
        </div>
    </div>
</body>
<script src="../../script/api.js"></script>
<script src="../../script/jquery.js"></script>
<script src="../../script/ffkj.js"></script>
<script src="../../script/vue.js"></script>
<script>
    var view = new Vue({
        el: '#view',
        data: {
            sexType: 0
        }
    })
    // 选择性别
    // function selectSex(index) {
    //     $('.li').eq(index).addClass('select').siblings().removeClass('select');
    //     $('.info p').eq(index).removeClass('new-hide').siblings().addClass('new-hide');
    // }

    function selectSex(type) {
        view.sexType = type;
    }

    // 下一步
    function submit() {
        if (view.sexType == 0) {
            _msg('请选择性别');
            return;
        }
        var msg = '注册后将不能修改性别，确定吗？ 提示：你并不能与相同性别的用户交流';
        _confirm({
            msg: msg
        }, function (index) {
            if (index == 1) {
                // var sex = $('.select span').text();
                var sex = view.sexType == 1 ? '男' : '女';
                $api.setStorage('sex', sex); // 存储用户性别于本地

                var ios = $api.getStorage('shang');
                var phone = api.pageParam['phone'];
                var pwd = api.pageParam['password'];
                if(!ios){
                    _url({ url: 'user/man_frame', title: '欢迎', phone: phone, password: pwd, });
                }else{
                    _url({ url: 'frame0/she_zhi_ji_ben_zi_liao_frame', title: '完善资料', phone: phone, password: pwd})
                }
            }
        })
    }
</script>

</html>